$(function(){

    load()

    // TODO: 1.点击按钮添加 todo
    $("#title").on("keydown", function(e){
        if(e.keyCode === 13) {
            if($(this).val() === ""){
                alert("请输入任务名称");
                return;
            }
            // 获取本地存储的数据
            var local = getData();
            // 将数据追加到对象数组的尾部
            local.push({title: $(this).val(), done: false});
            $(this).val("");
            // 将新数组更新存储到本地
            saveData(local);
            // 点击回车键，读取并渲染数据
            load();
        }
    });

    // 获取 本地存储 数据
    function getData(){
        var data = localStorage.getItem("todolist");
        if(data != null){
            return JSON.parse(data);
        }else {
            return [];
        }
    }

    // 存储数据
    function saveData(data){
        localStorage.setItem("todolist",JSON.stringify(data));
    }

    // 读取数据
    function load(){
        // 获取本地存储数据
        var data = getData();
        // 正在进行项 个数
        var todoCount = 0;
        // 完成项 个数
        var doneCount = 0;
        // 清空 ol
        $("#todolist, #donelist").empty();
        // 遍历数据
        $.each(data, function(i, ele){
            if(ele.done){
                $('<li><input type="checkbox" checked="'+ele.done+'"><p>'+ele.title+'</p><a href="javascript:;" id="'+i+'"></a></li>')
                .prependTo("#donelist");
                doneCount++;
            }else {
                $('<li><input type="checkbox"><p>'+ele.title+'</p><a href="javascript:;" id="'+i+'"></a></li>')
            .prependTo("#todolist");
                todoCount++;
            }
        });
        $("#todocount").text(todoCount);
        $("#donecount").text(doneCount);

    }

    // 点击 动态创建的 a 删除数据
    $("#todolist,#donelist").on("click", "a", function(){
        // 获取本地存储
        var data = getData();
        // 修改数据
        var index = $(this).attr("id");
        console.log(index);
        // 更新存储
        data.splice(index,1);
        saveData(data);
        load();
    })

    // 点击 ul ol input 修改 todo 状态
    $("ul, ol").on("click", "input", function(){
        // 获取本地存储
        var data = getData();
        // 获取 input 索引
        var index = $(this).siblings("a").attr("id");
        console.log(index);
        // 修改 data 中 done 属性
        data[index].done = $(this).prop("checked");
        // 更新存储
        saveData(data);
        // 渲染
        load();
    })
});